<template>
	<view class="">
		<view class="top"></view>
		<view class="main">
			<view class="title">
				修改用户信息
			</view>
			<view class="list">
				<view class="list-view">
					姓名：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="请输入姓名" :value="allsubit.au_name" v-model="allsubit.au_name" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					用户电话：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="number" placeholder="用户电话" :value="allsubit.au_tel" v-model="allsubit.au_tel" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					详细地址：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="地址" :value="allsubit.au_addr" v-model="allsubit.au_addr" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					昵称：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="昵称" :value="allsubit.au_nickname" v-model="allsubit.au_nickname" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					身份证：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="身份证" :value="allsubit.au_sfz" v-model="allsubit.au_sfz" />
				</view>
			</view>
			<view class="list">
				<view class="list-view">
					出生年月：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="出生年月" :value="allsubit.au_birth" v-model="allsubit.au_birth"
						@click="showcalendars()" />
				</view>
				<u-picker mode="time" v-model="showtime" :params="params" @confirm="makeTime"></u-picker>
			</view>
			<view class="list">
				<view class="list-view">
					性别：
				</view>
				<view style="padding-right: 88rpx;">
					<input type="text" placeholder="性别" :value="allsubit.au_showsex" v-model="allsubit.au_showsex"
						@click="showselects()" />
				</view>
				<u-select v-model="showselect" :list="list" @confirm="confirm"></u-select>
			</view>
		</view>

		<view class="bottom" @click="subit()" id="buttomName">
			{{subitName}}
		</view>
	</view>
</template>

<script>
	export default {
		// components:{
		// 	"u-select":u-select
		// },
		data() {
			return {
				showtime: false,
				params: {
					year: true,
					month: true,
					day: true,
					// hour: true,
					// minute: true,
					// second: true
				},
				//性别
				showselect: false,
				list: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					},
					{
						value: 2,
						label: '未知'
					}
				],
				allsubit: {},
				subitName: '确认提交',
				mainmsg: '',
				token: ''
			}
		},
		onLoad: function(options) {
			this.mainmsg = uni.getStorageSync('mainmsg');
			this.token = uni.getStorageSync('token');
			this.allsubit = this.mainmsg
			if(this.allsubit.au_birth){
				let str = this.allsubit.au_birth.substring(this.allsubit.au_birth.indexOf("(") + 1,this.allsubit.au_birth.indexOf(")"))
				this.allsubit.au_birth = this.formatDate(str)
			}
			switch (this.allsubit.au_sex) {
				case 0:
					this.allsubit.au_showsex = '男'
					break;
				case 1:
					this.allsubit.au_showsex = '女'
					break;
				case 2:
					this.allsubit.au_showsex = '未知'
					break;
				default:
					break;
			}

		},

		onUnload: function() {

		},
		methods: {
			formatDate(str) {
				str = Number(str)
				var date = new Date(str); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D

			},
			makeTime(e) {
				this.allsubit.au_birth = e.year + '-' + e.month + '-' + e.day
				 // + ' ' + e.hour + ":" + e.minute + ":" + e
					// .second
			},
			showcalendars() {
				uni.hideKeyboard();
				this.showtime = true
			},
			confirm(e) {
				this.allsubit.au_sex = e[0].value
				this.allsubit.au_showsex = e[0].label
			},
			showselects() {
				uni.hideKeyboard();
				this.showselect = true
			},
			subit() {
				if (this.subitName === '已提交成功') {
					return
				}
				
				if(!this.allsubit.au_name){
					uni.showToast({
						icon: "none",
						title: '请输入姓名'
					})
					return
				}
				
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.allsubit.au_tel))){
					uni.showToast({title: '请填写电话',icon:"none"});
					return false; 
				} 
				
				if(!this.allsubit.au_addr){
					uni.showToast({
						icon: "none",
						title: '请输入地址'
					})
					return
				}
				
				if(!this.allsubit.au_nickname){
					uni.showToast({
						icon: "none",
						title: '请输入昵称'
					})
					return
				}
				
				if(!this.allsubit.au_sfz){
					uni.showToast({
						icon: "none",
						title: '请输入身份证'
					})
					return
				}
				
				if(!this.allsubit.au_birth){
					uni.showToast({
						icon: "none",
						title: '请选择出生年月'
					})
					return
				}
				
				if(!this.allsubit.au_showsex){
					uni.showToast({
						icon: "none",
						title: '请选择性别'
					})
					return
				}
				
				let _this = this
				uni.request({
					url: _this.$title + 'AppUser/ModifyAppUserInfo',
					data: _this.allsubit,
					header: {
						'auth': _this.token
					},
					success: (res) => {
						if (res.data.status === 200) {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
							_this.subitName = '已提交成功'
							var div = document.getElementById(
								'buttomName');
							div.setAttribute("class",
								"bottom-after");
							uni.setStorage({
							    key: 'mainmsg',
							    data: _this.allsubit,
							    success: function () {
							        
							    }
							});
							
						} else {
							uni.showToast({
								icon: "none",
								title: '提交失败'
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	/* .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.top {
		width: 100%;
		height: 12rem;
		background-color: #18ab4e;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;
	}

	.main {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: -7rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.main2 {
		/* position: relative; */
		background-color: white;
		margin: 0 auto;
		margin-top: 2rem;
		padding-bottom: 2rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
	}

	.list2 {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.title {
		/* position: relative; */
		padding-top: 4rem;
		text-align: center;
		font-size: x-large;
		font-weight: 400;
	}

	.list {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		display: flex;
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		border-bottom: 1px solid #ABB1BA;
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-last {
		/* position: relative; */
		/* padding-top: 4.5rem; */
		/* display: flex; */
		justify-content: space-between;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: medium;
		float: right;
		/* border-bottom: 1px solid #ABB1BA; */
		height: 1rem;
		line-height: 3.5rem;
		font-weight: 500;
	}

	.list-view {
		width: 250rpx;
		white-space: nowrap;
	}

	.list-car {
		display: flex;
		justify-content: space-between;
	}

	input {
		height: 3.5rem;
		line-height: 3.5rem;
		font-weight: 500;
		font-size: medium;
		border: 0;
		outline: none;
		background-color: rgba(0, 0, 0, 0);
		width: 40vw;
	}

	.face {
		background-color: white;
		margin: 0 auto;
		margin-top: 1rem;
		height: 5rem;
		width: 88vw;
		box-shadow: 0px 0px 0.625rem #eaeaea;
		z-index: 1000;
		border-radius: 1.625rem;
		display: flex;
		justify-content: space-between;
	}

	.canvas-bg {
		/* margin: 0 auto; */
		/* margin-top: 1rem; */
		height: 88vw;
		width: 88vw;
		float: left;
		/* box-shadow: 0px 0px 0.625rem #55ffff; */
		/* z-index: 1000; */
		/* border-radius: 1.625rem; */
		/* display: flex; */
		/* justify-content: space-between; */
	}

	.carNum {
		border: 1px solid black;
		width: 1.8rem;
		height: 2.6rem;
		margin-top: 0.2rem;
		text-align: center;
		line-height: 2.6rem;
	}

	/* .carNum:hover {
		border: 1px solid red;
	} */

	.isNumClick {
		border: 1px solid red;
	}

	/* .carNum:hover ~ #two { background-color: yellow; } */


	.bottom {
		margin: 0 auto;
		margin-top: 5rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		background-color: #18ab4e;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
	}

	.bottom-after {
		margin: 0 auto;
		margin-top: 7rem;
		margin-bottom: 3rem;
		bottom: 7rem;
		width: 90%;
		height: 3rem;
		color: white;
		line-height: 3rem;
		font-size: x-large;
		text-align: center;
		border-radius: 1rem;
		background-color: #b4bdcb;
	}
</style>
